<template>
  <div class="dashboard">
    <!-- 数据卡片区域 -->
    <el-row :gutter="20" class="data-cards">
      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <el-card class="data-card temperature-card" shadow="hover">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><Monitor /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">温度</div>
              <div class="card-value">{{ latestData.temperature || '--' }}°C</div>
              <div class="card-trend" :class="temperatureTrend.class">
                <el-icon><component :is="temperatureTrend.icon" /></el-icon>
                {{ temperatureTrend.text }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <el-card class="data-card humidity-card" shadow="hover">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><Cloudy /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">湿度</div>
              <div class="card-value">{{ latestData.humidity || '--' }}%</div>
              <div class="card-trend" :class="humidityTrend.class">
                <el-icon><component :is="humidityTrend.icon" /></el-icon>
                {{ humidityTrend.text }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <el-card class="data-card pressure-card" shadow="hover">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><Compass /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">气压</div>
              <div class="card-value">{{ formatPressure(latestData.pressure) }}</div>
              <div class="card-trend" :class="pressureTrend.class">
                <el-icon><component :is="pressureTrend.icon" /></el-icon>
                {{ pressureTrend.text }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="6" :md="6" :lg="6">
        <el-card class="data-card light-card" shadow="hover">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><Sunny /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">光照强度</div>
              <div class="card-value">{{ latestData.lightIntensity || '--' }} lux</div>
              <div class="card-trend" :class="lightTrend.class">
                <el-icon><component :is="lightTrend.icon" /></el-icon>
                {{ lightTrend.text }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <!-- 实时数据趋势图 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>实时数据趋势</span>
              <div class="header-actions">
                <el-select 
                  v-model="chartTimeRange" 
                  size="small" 
                  style="width: 120px"
                  popper-class="time-range-dropdown"
                  :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
                >
                  <el-option-group label="小时">
                    <el-option label="1小时" value="1" />
                    <el-option label="6小时" value="6" />
                    <el-option label="12小时" value="12" />
                    <el-option label="24小时" value="24" />
                  </el-option-group>
                  <el-option-group label="天">
                    <el-option label="3天" value="72" />
                    <el-option label="7天" value="168" />
                    <el-option label="30天" value="720" />
                  </el-option-group>
                  <el-option-group label="长时间">
                    <el-option label="3个月" value="2160" />
                    <el-option label="6个月" value="4320" />
                    <el-option label="1年" value="8760" />
                  </el-option-group>
                </el-select>
                <el-button size="small" @click="refreshChartData">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <v-chart 
              ref="trendChart" 
              :option="trendChartOption" 
              :loading="chartLoading"
              autoresize
            />
          </div>
        </el-card>
      </el-col>

      <!-- 环境质量评估 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>环境质量评估</span>
              <el-button size="small" @click="refreshQualityData">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="quality-content">
            <div class="quality-score">
              <div class="score-circle" :class="qualityLevel.class">
                <span class="score-value">{{ qualityScore }}</span>
                <span class="score-label">分</span>
              </div>
              <div class="quality-text">
                <div class="quality-level">{{ qualityLevel.text }}</div>
                <div class="quality-desc">{{ qualityDescription }}</div>
              </div>
            </div>
            <div class="quality-factors">
              <div class="factor-item" v-for="factor in qualityFactors" :key="factor.name">
                <span class="factor-name">{{ factor.name }}</span>
                <el-progress 
                  :percentage="factor.score" 
                  :color="factor.color"
                  :show-text="false"
                  :stroke-width="6"
                />
                <span class="factor-score">{{ factor.score }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计信息和预测 -->
    <el-row :gutter="20" class="info-section">
      <!-- 数据统计 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>数据统计</span>
              <el-button size="small" @click="refreshStatistics">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="statistics-content">
            <div class="stat-item">
              <span class="stat-label">总数据量</span>
              <span class="stat-value">{{ statistics.totalCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">今日数据</span>
              <span class="stat-value">{{ statistics.todayCount || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">数据质量</span>
              <span class="stat-value" :class="dataQuality.class">{{ dataQuality.text }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">最后更新</span>
              <span class="stat-value">{{ lastUpdateTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 天气预测 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>天气预测</span>
              <el-button size="small" @click="refreshWeatherPrediction">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="weather-content">
            <div class="weather-main">
              <div class="weather-icon">
                <el-icon size="48"><component :is="weatherPrediction.icon" /></el-icon>
              </div>
              <div class="weather-info">
                <div class="weather-type">{{ weatherPrediction.type }}</div>
                <div class="weather-confidence">置信度: {{ weatherPrediction.confidence }}%</div>
              </div>
            </div>
            <div class="weather-desc">{{ weatherPrediction.description }}</div>
            <div class="weather-suggestions">
              <div class="suggestion-item" v-for="suggestion in weatherPrediction.suggestions" :key="suggestion">
                <el-icon><InfoFilled /></el-icon>
                <span>{{ suggestion }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 系统状态 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统状态</span>
              <el-button size="small" @click="refreshSystemStatus">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div class="system-content">
            <div class="status-item">
              <span class="status-label">数据采集</span>
              <el-tag :type="systemStatus.dataCollection.type" size="small">
                {{ systemStatus.dataCollection.text }}
              </el-tag>
            </div>
            <div class="status-item">
              <span class="status-label">数据分析</span>
              <el-tag :type="systemStatus.dataAnalysis.type" size="small">
                {{ systemStatus.dataAnalysis.text }}
              </el-tag>
            </div>
            <div class="status-item">
              <span class="status-label">存储空间</span>
              <div class="storage-info">
                <el-progress 
                  :percentage="systemStatus.storage.percentage" 
                  :color="systemStatus.storage.color"
                  :show-text="false"
                  :stroke-width="6"
                />
                <span class="storage-text">{{ systemStatus.storage.text }}</span>
              </div>
            </div>
            <div class="status-item">
              <span class="status-label">运行时间</span>
              <span class="status-value">{{ systemStatus.uptime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-row :gutter="20" class="action-section">
      <el-col :span="24">
        <el-card class="action-card" shadow="hover">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="action-buttons">
            <el-button type="primary" @click="$router.push('/realtime')">
              <el-icon><Monitor /></el-icon>
              实时监控
            </el-button>
            <el-button type="success" @click="$router.push('/history')">
              <el-icon><DataLine /></el-icon>
              历史数据
            </el-button>
            <el-button type="warning" @click="$router.push('/analysis')">
              <el-icon><TrendCharts /></el-icon>
              数据分析
            </el-button>
            <el-button type="info" @click="$router.push('/prediction')">
              <el-icon><Cloudy /></el-icon>
              预测分析
            </el-button>
            <el-button @click="exportData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button @click="generateReport">
              <el-icon><Document /></el-icon>
              生成报告
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Monitor, DataLine, TrendCharts, Download, Document,
  ArrowUp, ArrowDown, Minus, Refresh, InfoFilled,
  Cloudy, Compass, Sunny
} from '@element-plus/icons-vue'
import VChart from 'vue-echarts'
import { useSensorStore } from '@/stores/sensor'
import { timeUtils, numberUtils, colorUtils } from '@/utils'
import { sensorChartConfigs } from '@/utils/charts'

// 存储
const sensorStore = useSensorStore()

// 响应式数据
const chartTimeRange = ref('24')
const chartLoading = ref(false)
const trendChart = ref(null)
const refreshTimer = ref(null)

// 最新数据
const latestData = computed(() => sensorStore.latestData || {})

// 统计信息
const statistics = computed(() => sensorStore.statistics || {})

// 图表配置
const trendChartOption = computed(() => {
  // 根据时间范围选择合适的数据源
  let data = []
  const hours = parseInt(chartTimeRange.value)
  
  if (hours > 720) {
    // 超过30天（一年以内），使用月平均数据
    data = sensorStore.monthlyData || []
    console.log('图表使用月平均数据，数据量:', data.length)
  } else if (hours > 24) {
    // 超过1天（一个月以内），使用每日统计数据
    data = sensorStore.dailyData || []
    console.log('图表使用每日统计数据，数据量:', data.length)
  } else {
    // 1天以内，使用每小时数据
    data = sensorStore.hourlyData || []
    console.log('图表使用每小时数据，数据量:', data.length)
  }
  
  if (!data || data.length === 0) {
    console.warn('图表数据为空')
    return {
      title: {
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#999',
          fontSize: 16
        }
      }
    }
  }
  
  // 使用combined方法生成图表配置
  console.log('生成图表配置，数据样本:', data[0])
  return sensorChartConfigs.combined(data)
})

// 趋势计算
const temperatureTrend = computed(() => {
  const trend = calculateTrend('temperature')
  return {
    class: trend.type,
    icon: trend.icon,
    text: trend.text
  }
})

const humidityTrend = computed(() => {
  const trend = calculateTrend('humidity')
  return {
    class: trend.type,
    icon: trend.icon,
    text: trend.text
  }
})

const pressureTrend = computed(() => {
  const trend = calculateTrend('pressure')
  return {
    class: trend.type,
    icon: trend.icon,
    text: trend.text
  }
})

const lightTrend = computed(() => {
  const trend = calculateTrend('lightIntensity')
  return {
    class: trend.type,
    icon: trend.icon,
    text: trend.text
  }
})

// 环境质量
const qualityScore = computed(() => {
  return 0 // 由于分析功能已被删除，这里返回0
})

const qualityLevel = computed(() => {
  return { class: 'unknown', text: '未知' }
})

const qualityDescription = computed(() => {
  return '正在评估环境质量...'
})

const qualityFactors = computed(() => {
  return []
})

// 数据质量
const dataQuality = computed(() => {
  const quality = sensorStore.dataQuality
  if (!quality) return { class: 'unknown', text: '未知' }
  
  const qualityMap = {
    excellent: { class: 'excellent', text: '优秀' },
    good: { class: 'good', text: '良好' },
    fair: { class: 'fair', text: '一般' },
    poor: { class: 'poor', text: '较差' }
  }
  
  return qualityMap[quality] || { class: 'unknown', text: '未知' }
})

// 最后更新时间
const lastUpdateTime = computed(() => {
  if (!latestData.value.createdAt) return '--'
  return timeUtils.fromNow(latestData.value.createdAt)
})

// 天气预测
const weatherPrediction = computed(() => {
  return {
    type: '未知',
    icon: 'Cloudy',
    confidence: 0,
    description: '正在分析天气数据...',
    suggestions: []
  }
})

// 系统状态
const systemStatus = reactive({
  dataCollection: { type: 'success', text: '正常' },
  dataAnalysis: { type: 'success', text: '正常' },
  storage: { percentage: 65, color: '#67c23a', text: '65% 已使用' },
  uptime: '0天0小时'
})

// 方法
const formatPressure = (pressure) => {
  if (!pressure) return '--'
  return `${numberUtils.format(pressure / 100, 0)} hPa`
}

const calculateTrend = (field) => {
  const data = sensorStore.historicalData
  if (!data || data.length < 2) {
    return { type: 'stable', icon: 'Minus', text: '稳定' }
  }
  
  const latest = data[data.length - 1][field]
  const previous = data[data.length - 2][field]
  const change = latest - previous
  const changePercent = Math.abs(change / previous * 100)
  
  if (changePercent < 1) {
    return { type: 'stable', icon: 'Minus', text: '稳定' }
  } else if (change > 0) {
    return { type: 'rising', icon: 'ArrowUp', text: `上升 ${numberUtils.format(changePercent, 1)}%` }
  } else {
    return { type: 'falling', icon: 'ArrowDown', text: `下降 ${numberUtils.format(changePercent, 1)}%` }
  }
}

const refreshChartData = async () => {
  chartLoading.value = true
  try {
    const hours = parseInt(chartTimeRange.value)
    console.log(`开始刷新图表数据，选择的时间范围: ${hours}小时`)
    
    // 对于长时间范围，使用不同的数据聚合方式
    if (hours > 720) { // 30天以上（一年以内）
      // 使用月平均数据
      console.log('使用月平均数据')
      const days = Math.ceil(hours / 24)
      await sensorStore.fetchMonthlyAverageData(days)
      console.log('月平均数据获取完成，数据量:', sensorStore.monthlyData.length)
      console.log('数据样本:', sensorStore.monthlyData[0])
    } else if (hours > 24) { // 1天以上（一个月以内）
      // 使用每日统计数据
      console.log('使用每日统计数据')
      const days = Math.ceil(hours / 24)
      await sensorStore.fetchDailyStatistics(days)
      console.log('每日统计数据获取完成，数据量:', sensorStore.dailyData.length)
      console.log('数据样本:', sensorStore.dailyData[0])
    } else {
      // 一天以内，使用每小时数据
      console.log('使用每小时数据')
      await sensorStore.fetchHourlyData(hours)
      console.log('每小时数据获取完成，数据量:', sensorStore.hourlyData.length)
      console.log('数据样本:', sensorStore.hourlyData[0])
    }
  } catch (error) {
    ElMessage.error('刷新图表数据失败')
    console.error('刷新图表数据失败:', error)
  } finally {
    chartLoading.value = false
  }
}

const refreshQualityData = async () => {
  // 由于分析功能已被删除，这里不需要执行任何操作
}

const refreshStatistics = async () => {
  try {
    await sensorStore.updateStatistics()
  } catch (error) {
    ElMessage.error('刷新统计数据失败')
  }
}

const refreshWeatherPrediction = async () => {
  // 由于分析功能已被删除，这里不需要执行任何操作
}

const refreshSystemStatus = () => {
  // 模拟系统状态更新
  const now = new Date()
  const startTime = new Date(now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000)
  const uptime = timeUtils.formatDuration(now - startTime)
  systemStatus.uptime = uptime
  
  // 随机更新存储使用率
  const percentage = Math.floor(Math.random() * 40) + 50
  systemStatus.storage.percentage = percentage
  systemStatus.storage.text = `${percentage}% 已使用`
  
  if (percentage > 80) {
    systemStatus.storage.color = '#f56c6c'
  } else if (percentage > 60) {
    systemStatus.storage.color = '#e6a23c'
  } else {
    systemStatus.storage.color = '#67c23a'
  }
}

const exportData = async () => {
  try {
    const result = await ElMessageBox.confirm(
      '确定要导出当前数据吗？',
      '导出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    if (result === 'confirm') {
      // 这里实现数据导出逻辑
      ElMessage.success('数据导出功能开发中...')
    }
  } catch {
    // 用户取消
  }
}

const generateReport = async () => {
  try {
    const result = await ElMessageBox.confirm(
      '确定要生成综合分析报告吗？',
      '生成报告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    if (result === 'confirm') {
      // 这里实现生成报告逻辑
      ElMessage.success('报告生成功能开发中...')
    }
  } catch {
    // 用户取消或生成失败
  }
}

const startAutoRefresh = () => {
  refreshTimer.value = setInterval(async () => {
    try {
      await sensorStore.fetchLatestData()
      // 根据选择的时间范围刷新图表数据
      refreshChartData()
    } catch (error) {
      console.error('自动刷新失败:', error)
    }
  }, 30000) // 每30秒刷新一次
}

const stopAutoRefresh = () => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
    refreshTimer.value = null
  }
}

// 生命周期
onMounted(async () => {
  try {
    console.log('Dashboard页面初始化')
    // 初始化数据
    await Promise.all([
      sensorStore.fetchLatestData(),
      refreshChartData(), // 使用refreshChartData来获取适当的数据
      sensorStore.updateStatistics()
    ])
    
    // 启动自动刷新
    startAutoRefresh()
    
    // 初始化系统状态
    refreshSystemStatus()
    console.log('Dashboard页面初始化完成')
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('初始化数据失败，请检查网络连接或刷新页面')
  }
})

onUnmounted(() => {
  stopAutoRefresh()
})

// 监听时间范围变化
watch(chartTimeRange, () => {
  refreshChartData()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

/* 数据卡片样式 */
.data-cards {
  margin-bottom: 20px;
}

.data-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.temperature-card .card-icon {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.humidity-card .card-icon {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.pressure-card .card-icon {
  background: linear-gradient(135deg, #55a3ff, #2d3436);
}

.light-card .card-icon {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-trend.rising {
  color: #f56c6c;
}

.card-trend.falling {
  color: #67c23a;
}

.card-trend.stable {
  color: #909399;
}

/* 图表区域样式 */
.chart-section {
  margin-bottom: 20px;
}

.chart-card {
  border: none;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-actions .el-select {
  min-width: 120px;
}

.chart-container {
  height: 450px;
  padding-bottom: 10px;
}

/* 环境质量样式 */
.quality-content {
  padding: 10px 0;
}

.quality-score {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  position: relative;
}

.score-circle.excellent {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  color: white;
}

.score-circle.good {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: white;
}

.score-circle.fair {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
  color: white;
}

.score-circle.poor {
  background: linear-gradient(135deg, #f56c6c, #f78989);
  color: white;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
}

.score-label {
  font-size: 12px;
}

.quality-text {
  flex: 1;
}

.quality-level {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.quality-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
}

.quality-factors {
  space-y: 10px;
}

.factor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.factor-name {
  width: 40px;
  font-size: 12px;
  color: #606266;
}

.factor-score {
  width: 30px;
  font-size: 12px;
  color: #303133;
  text-align: right;
}

/* 信息区域样式 */
.info-section {
  margin-bottom: 20px;
}

.info-card {
  border: none;
  border-radius: 12px;
  height: 100%;
}

/* 统计信息样式 */
.statistics-content {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.stat-value.excellent {
  color: #67c23a;
}

.stat-value.good {
  color: #409eff;
}

.stat-value.fair {
  color: #e6a23c;
}

.stat-value.poor {
  color: #f56c6c;
}

/* 天气预测样式 */
.weather-content {
  padding: 10px 0;
}

.weather-main {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.weather-icon {
  margin-right: 15px;
  color: #409eff;
}

.weather-info {
  flex: 1;
}

.weather-type {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.weather-confidence {
  font-size: 14px;
  color: #606266;
}

.weather-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
  margin-bottom: 15px;
}

.weather-suggestions {
  space-y: 8px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

/* 系统状态样式 */
.system-content {
  padding: 10px 0;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  font-size: 14px;
  color: #606266;
}

.status-value {
  font-size: 14px;
  color: #303133;
}

.storage-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.storage-text {
  font-size: 12px;
  color: #606266;
  white-space: nowrap;
}

/* 快速操作样式 */
.action-section {
  margin-bottom: 20px;
}

.action-card {
  border: none;
  border-radius: 12px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.action-buttons .el-button {
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 500;
}

/* 自定义下拉菜单样式 */
:deep(.time-range-dropdown) {
  max-height: 400px !important;
  overflow-y: auto !important;
}

:deep(.el-select-dropdown__list) {
  padding-bottom: 8px;
  max-height: none !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .page-header p {
    font-size: 14px;
  }
  
  .data-cards {
    margin-bottom: 15px;
  }
  
  .card-value {
    font-size: 24px;
  }
  
  .chart-container {
    height: 350px;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .action-buttons .el-button {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .quality-score {
    flex-direction: column;
    text-align: center;
  }
  
  .score-circle {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .weather-main {
    flex-direction: column;
    text-align: center;
  }
  
  .weather-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>